<template>
  <div ref="popW">
    <div class="popContent">
      <div class="font-lan-l mb-3">
        <div>
          {{ data.name }}
        </div>
        <div class="close" @click="closeWindow">
          <el-icon><CircleClose /></el-icon>
        </div>
      </div>
      <div class="sxtcwrap">
        <div class="sxtc"  v-show="getInfo.value.name != '摄像头'">
          <div class="child">
            <div class="label">名称:</div>
            <div>
              {{ data.diyName }}
            </div>
          </div>
          <div class="child">
            <div class="label">经度：</div>
            <div>
              {{ data.lon }}
            </div>
          </div>
          <div class="child">
            <div class="label">维度：</div>
            <div>
              {{ data.lat }}
            </div>
          </div>
          <div class="child" v-if="data.ptype == 'set1'">
            <div class="label">供应商:</div>
            <div>
              {{ data.manufacturers ? data.manufacturers : "-" }}
            </div>
          </div>
          <div class="child" v-if="data.ptype == 'set1'">
            <div class="label">设备编号:</div>
            <div>
              {{ data.serialNumber ? data.serialNumber : "-" }}
            </div>
          </div>
          <div class="child" v-if="data.ptype == 'set1'">
            <div class="label">设备状态:</div>
            <div>
              {{ data.deviceStatus ? data.deviceStatus : "-" }}
            </div>
          </div>
          <div class="child">
            <div class="label">
              {{ data.ptype == "set1" ? "设备" : "设施" }}地址:
            </div>
            <div>
              {{ data.address ? data.address : "-" }}
            </div>
          </div>
          <div class="child">
            <div class="label">所在地块:</div>
            <div>
              {{ data.plotName ? data.plotName : "-" }}
            </div>
          </div>
          <div class="child" v-if="data.name == '气象设备'">
            <div class="label">温度:</div>
            <div>{{ data.wd ? data.wd : "-" }}℃</div>
          </div>
          <div class="child" v-if="data.name == '气象设备'">
            <div class="label">湿度:</div>
            <div>{{ data.sd ? data.sd : "-" }}%RH</div>
          </div>
          <div class="child" v-if="data.name == '气象设备'">
            <div class="label">降雨量:</div>
            <div>{{ data.jyl ? data.jyl : "-" }}mm</div>
          </div>
          <div class="child" v-if="data.name == '气象设备'">
            <div class="label">辐射:</div>
            <div>{{ data.fushe ? data.fushe : "-" }}w/㎡</div>
          </div>
          <div class="child" v-if="data.name == '气象设备'">
            <div class="label">光照:</div>
            <div>{{ data.fushe ? data.fushe : "-" }}lux</div>
          </div>
          <div class="child" v-if="data.name == '气象设备'">
            <div class="label">风速:</div>
            <div>{{ data.fs ? data.fs : "-" }}m/s</div>
          </div>

          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">土温(10cm):</div>
            <div>{{ data.tw10 ? data.tw10 : "-" }}℃</div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">土温(20cm):</div>
            <div>{{ data.tw20 ? data.tw20 : "-" }}℃</div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">土温(30cm):</div>
            <div>{{ data.tw30 ? data.tw30 : "-" }}℃</div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">土湿(10cm):</div>
            <div>{{ data.ts10 ? data.ts10 : "-" }}%RH</div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">土湿(20cm):</div>
            <div>{{ data.ts20 ? data.ts20 : "-" }}%RH</div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">土湿(30cm):</div>
            <div>{{ data.ts30 ? data.ts30 : "-" }}%RH</div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">EC(10cm):</div>
            <div>
              {{ data.ec10 ? data.ec10 : "-" }}
            </div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">EC(20cm):</div>
            <div>
              {{ data.ec20 ? data.ec20 : "-" }}
            </div>
          </div>
          <div class="child" v-if="data.name == '墒情设备'">
            <div class="label">EC(30cm):</div>
            <div>
              {{ data.ec30 ? data.ec30 : "-" }}
            </div>
          </div>

          <div class="child" v-if="data.ptype == 'set2'">
            <div class="label">添加时间:</div>
            <div>
              {{ data.buildTime ? data.buildTime : "-" }}
            </div>
          </div>
          <div class="child" v-if="data.name == '水肥机'">
            <div class="label">主管进口压力 :</div>
            <div>{{ data.zgjkyl ? data.zgjkyl : "-" }}MPa</div>
          </div>
          <div class="child" v-if="data.name == '水肥机'">
            <div class="label">肥液累计流量1 :</div>
            <div>{{ data.fyljll1 ? data.fyljll1 : "-" }}L</div>
          </div>
          <div class="child" v-if="data.name == '水肥机'">
            <div class="label">肥液累计流量2 :</div>
            <div>{{ data.fyljll2 ? data.fyljll2 : "-" }}L</div>
          </div>
          <div class="child" v-if="data.name == '水肥机'">
            <div class="label">管道泵电压 :</div>
            <div>{{ data.gdbdy ? data.gdbdy : "-" }}V</div>
          </div>
          <div class="child" v-if="data.name == '水肥机'">
            <div class="label">管道泵电流 :</div>
            <div>{{ data.gdbdl ? data.gdbdl : "-" }}A</div>
          </div>
          <div class="child" v-if="data.name == '水肥机'">
            <div class="label">管道泵状态 :</div>
            <div>{{ data.gdbzt==1 ? '在线' : "离线" }}</div>
          </div>
          <div class="child" v-if="data.name == '虫情设备'||data.name == '孢子仪'"> 
            <div class="label" v-if="!data.cqpic">设备图片 :</div>
            <div class="nopicdiv" v-if="!data.cqpic">
              <div>
                暂无图片
              </div>
            </div>
          </div>
          <div class="picwrapadd" v-if="data.name == '虫情设备'||data.name == '孢子仪'"> 
            <div class="label" v-if="data.cqpic">设备图片 :</div>
            <img v-if="data.cqpic" @click="prLook(data.cqpic)" :src="data.cqpic" class="cqpic" alt="" />
          </div>
        </div>
        
        <div class="sxtwrap2" v-show="getInfo.value.name == '摄像头'">
          <!-- <div id="video-container"  class="videocontent"></div> -->
          <m3u8play ref="camera" />
        </div> 
        
      </div>

      <!-- <div class="videowrap2">
            <img src="@/assets/img/fm.png" class="videofm" alt="">
        </div> -->
    </div>
  </div>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  watch,
  onBeforeUnmount
} from "vue";
import { preview } from 'vue3-preview-image'
import radar from "@/chart/pieChart/radar";
import EZUIKit from "ezuikit-js";
import { previewThemeData } from "../../components/_util/video.config";
import m3u8play from '@/components/cameraPlay/m3u8Play.vue'
// 声明类型
const PropsType = {
  data: {
    type: Object,
    default: {},
    require: true,
  },
} as const;
export default defineComponent({
  props: PropsType,
  components: {
    radar,
    m3u8play
  },
  setup(props, { emit }) {
    //变量
    const camera = ref(null)
    const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]);
    const rateValue = ref(3);
    const solidData = reactive([
      {
        type: 2,
        num: 29.3,
        text: "土壤温度(-10cm)",
      },
      {
        type: 1,
        num: 29.3,
        text: "土壤温度(-20cm)",
      },
      {
        type: 2,
        num: 29.3,
        text: "土壤温度(-30cm)",
      },
      {
        type: 1,
        num: 29.3,
        text: "土壤湿度(-10cm)",
      },
      {
        type: 2,
        num: 29.3,
        text: "土壤湿度(-20cm)",
      },
      {
        type: 1,
        num: 29.3,
        text: "土壤湿度(-30cm)",
      },
    ]);
    let playr = ref(null);
    let getInfo = reactive({
      value: {
        token: "",
        url: "",
        name:''
      },
    });
    // 生命周期
    onMounted(() => {
      //
      console.log("弹框的的", props.data);
      
    });

    onUnmounted(() => {
      //
    });

    watch(
      () => props.data,
      (now: any) => {
        console.log("now", now);
        getInfo.value.token = now.token;
        getInfo.value.url = now.url;
        getInfo.value.name = now.name;
        
      },
      {
        immediate: true,
        deep: true,
      }
    );

    //methods
    function prLook(url){
      preview(0,[
        url
      ])
    }
    function closeWindow() {
      // if( playr.value){
      //   console.log('xxxxxx关闭')
      //   playr.value.stop()
      //   playr.value = null;
      //   if(document.getElementById('video-container')){
      //     document.getElementById('video-container').innerHTML = "";
      //   }
      //   emit("closeWindow");
      // }else{
      //   emit("closeWindow");
      // }
      camera.value.closeWindow()
      emit("closeWindow");
    }

    function play(val){
      camera.value.playm3u8(val)
    }
    function initVideo() {
      if(playr.value){
        playr.value.stop()
        playr.value = null;
        if(document.getElementById('video-container')){
          document.getElementById('video-container').innerHTML = "";
        }
      }
      this.$nextTick(()=>{
        let themeData = JSON.parse(JSON.stringify(previewThemeData));
        let options = {
          id: "video-container",
          accessToken: getInfo.value.token,
          url: getInfo.value.url,
          width: 265,
          height: 149,
          audio: 0,
          autoplay: true,
          themeData: themeData,
          handleSuccess: () => {
            // setTimeout(() => {
            //   this.player.enableZoom();
            // }, 1000);
          },
          // poster: this.baseUrl + this.nowimg,
        };
        playr.value = new EZUIKit.EZUIKitPlayer(options);
      })
      
    }
    const getType = (data) => {
      let type = "";
      switch (data) {
        case "优秀":
          type = "success";
          break;
        case "良好":
          type = "";
          break;
        case "中等":
          type = "warning";
          break;
        case "较差":
          type = "danger";
          break;
      }
      return type;
    };
    onBeforeUnmount(()=>{
      if(playr.value){
        playr.value.stop()
        playr.value = null;
        if( document.getElementById('video-container')){
          document.getElementById('video-container').innerHTML = "";
        }
        
      }
    })

    // return
    return {
      prLook,
      getInfo,
      initVideo,
      colors,
      getType,
      rateValue,
      solidData,
      closeWindow,
      camera,
      play
    };
  },
});
</script>
  
  <style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.picwrapadd{
 
 
  .cqpic{
    margin-top: 10px;
    width: 264px;
    height: 170px;
    cursor: pointer;
  }
}
.sxtcwrap{
  display: flex;
}
.popContent {
  color: #fff;
  width: 100%;
  position: relative;
  .videocontent {
    width: 265px;
    height: 167px;
    background: #000;
  }
  .videowrap2 {
    width: 265px;
  }
  .videofm {
    width: 100%;
    border-radius: 20px;
    margin-top: 10px;
  }
  .sxtc {
    position: relative;
    .label {
      color: rgba(255, 255, 255, 0.6);
      margin-right: 10px;
      font-size: 12px;
      width: 90px;
    }
    .child {
      display: flex;
      align-items: center;
      font-size: 14px;
      margin-top: 6px;
    }
  }
  .content6 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .c6child {
      width: 48%;
      font-size: 13px;
    }
    .c22 {
      display: flex;
      justify-content: space-between;
    }
    .line {
      position: relative;
      background: rgba(0, 102, 255, 0.3);
      height: 4px;
      border-radius: 3px;
      overflow: hidden;
      margin: 7px 0;
      .activeline {
        position: absolute;
        left: 0;
        height: 4px;
        width: 50%;
        top: 0;
        background: rgba(0, 102, 255, 1);
      }
    }
  }
  .content5 {
    display: flex;
    align-items: center;
    .right {
      margin-left: 20px;
      .top {
        .star {
          margin-left: 5px;
        }
        .t1 {
          display: flex;
          align-items: center;
          margin-top: 10px;
          .label {
            color: rgba(255, 255, 255, 0.6);
          }
          .zd {
            background: rgba(49, 127, 245, 1);
            color: #fff;
            padding: 1px 4px;
            border-radius: 5px;
            margin-left: 5px;
          }
        }
      }
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .bchild {
        width: 49.5%;
        display: flex;
        margin-bottom: 10px;
        .info1 {
          display: flex;
          flex-direction: column;
          margin-left: 5px;
          .text3 {
            color: rgba(198, 196, 204, 1);
          }
        }
      }
    }
  }
  .flexdiv {
    margin-right: 10px;
  }
  .mb-1 {
    display: flex;
    align-items: center;
  }

  .description {
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .font-lan-m {
    position: relative;
    top: 0px;
  }
  .dizhi {
    position: relative;
    top: 3px;
  }
  .font-lan-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .close {
  }
  .description {
    font-size: 12px;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    line-height: 16px;
    -webkit-background-clip: text;
  }
  .sxtwrap2{
    min-width: 400px;
  }
}
</style>
  